<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'header.php'?>
<style type="text/css">
	#import {
		position: relative;
		top: 1.4px;
	}
    #dynamic-table img {
		cursor: pointer;
		max-height: 200px;
	}
	#cboxClose {
		text-indent: 0;
		font-size: 50px;
		font-weight: bold;
		margin-top: 10px;
		color: red;
	}
	.fa-calendar{
		position: absolute;
		left: 8px;
		top: 4px;
	}
	.hour-input {
		width: 160px;
		padding-left: 28px !important;
	}
	.outer-time-picker {
		position:relative;
	}
	.btn-search-time {
		position: relative;
		top: 1px;
		right: 4px;
		outline:none;
		/* height:33px; */
		height:34px;
		width:44px;
		border:1px solid #669FC7;
		background-color:#669FC7;
		border:0;
	}
</style>
<div class="page-header">
	<h1>
		教师考勤数据
	</h1>
</div>
<div class="col-xs-12 content-filter">
	<!-- 筛选 -->
	<div class="widget-box">
		<div class="widget-header">
			<h4 class="widget-title">内容筛选</h4>
			<div class="widget-toolbar">
				<a href="#" data-action="collapse">
					<i class="ace-icon fa fa-chevron-up"></i>
				</a>
				<a href="#" data-action="close">
					<i class="ace-icon fa fa-times"></i>
				</a>
			</div>
		</div>
		<div class="widget-body">
			<div class="widget-main">
				<div class="form-inline" id="data-search">
					<div class="form-inline keyword-search-div">
						<label class="keyword-search-label">名称&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
						<div class="keyword-search-box">
							<div class="div-search">
								<input style="float:left;height:30px;width:180px;border:1px solid #669FC7;padding:0 30px 0 14px;border-radius:10px 0 0 10px !important;-moz-border-radius:10px 0 0 10px;" type="text" name="student-name" placeholder="搜索教师名称..." autocomplete="off">
								<span id="empty-search" style="position:relative;right:64px;cursor:pointer;display:none;">×</span>
								<button id="btn-search" class="btn-search" style="outline:none;float:left;height:30px;width:44px;border:1px solid #669FC7;background-color:#669FC7;border:0;border-radius:0 10px 10px 0;-moz-border-radius:0 10px 10px 0;">
									<i class="ace-icon fa fa-search nav-search-icon white"></i>
								</button>
							</div>
						</div>
					</div>

					<div class="form-inline keyword-search-div">
                        <label class="keyword-search-label" style="padding-top:5px;">签到时间&nbsp;&nbsp;&nbsp;&nbsp;</label>
                        <div class="">
							<span class="outer-time-picker">
								<input class="hour-input hour-input-begin" type="text" name="begin_time" value="<?= date('Y-m-d', strtotime('-7 day')) . ' 00:00' ?>" />
								<i class="fa fa-calendar"></i>
							</span>

								&nbsp;&nbsp;-&nbsp;&nbsp;

							<span class="outer-time-picker">
								<input class="hour-input hour-input-end" type="text" name="end_time" value="<?= date('Y-m-d') . ' 23:59' ?>" />
								<i class="fa fa-calendar"></i>
							</span>

							<button class="btn-search-time">
								<i class="ace-icon fa fa-search nav-search-icon white"></i>
							</button>
                        </div>
                    </div>	
				</div>
			</div>
		</div>
	</div>
</div>
<div class="col-xs-12">
	<!-- 学校表格 -->
	<table id="dynamic-table" class="table table-striped table-bordered table-hover mt10">
		<thead>
			<tr>
				<th>教师名称</th>
                <th>班级名称</th>
                <th>课程科目</th>
                <th>签到类型</th>
				<th>签到状态</th>
				<th>签到图片</th>
                <th>签到时间</th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>
</div>

<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'footer.php'?>
<script src="<?= $staticAdminUrl ?>assets/laydate/laydate.js"></script>
<!-- 使用新的datetimepicker.js和css，解决设置不了pickerPosition -->
<link rel="stylesheet" href="<?=$staticAdminUrl?>assets/css/bootstrap-datetimepicker-new.min.css" />
<script src="<?=$staticAdminUrl?>assets/js/bootstrap-datetimepicker-new.min.js"></script>

<script type="text/javascript">
	var schoolId = 0;
	$(function(){
		var table = $('#dynamic-table').dt({
			"ajaxUrl": '<?=admin_url('data/get_teacher_sign_list?begintime=' . date('Y-m-d', strtotime('-7 day')) . ' 00:00' . '&endtime=' . date('Y-m-d') . ' 23:59' )?>',
			"columns": [
				{"data": "realname"},
                {"data": "class_name"},
                {"data": "schedule_lesson"},
                {"data": "sign_type"},
				{"data": "state"},
                {"data": function(ret) {
                    if(ret.sign_img) {
						return "<a href=" + ret.sign_img + " target='_blank'>查看图片</a>";
					} else {
						return ""
					}
				}},	
				{"data": function(ret) {
					if(ret.schedule_class_index == 0) {
						// 闸机考勤没有节数
						return ret.schedule_week_index + "<br>" + ret.createtime;
					} else {
						return ret.schedule_week_index + "<br>" + "第" + ret.schedule_class_index + "节课" + "<br>" + ret.createtime;
					}
                }}
			],
			"callback": function() {

			}
		});
		$.fn.datetimepicker.dates['zh'] = {
		　　days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六","星期日"],
		　　daysShort: ["日", "一", "二", "三", "四", "五", "六","日"],
		　　daysMin: ["日", "一", "二", "三", "四", "五", "六","日"],
		　　months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月","十二月"],
		　　monthsShort: ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"],
		　　meridiem: ["上午", "下午"],
		　　today: "今天"
		};
		// 初始化时间选择器
		$(".hour-input").datetimepicker({
			// format: 'YYYY-MM-DD HH:mm',
			format: 'yyyy-mm-dd hh:ii',
			language: 'zh-CN',
			todayHighlight: true,
			autoclose: true,
			minuteStep: 1
		});
		// 点击日期图标触发点击日期input
		$(".fa-calendar").click(function() {
			$(this).siblings(".hour-input").focus();
		});

		// 敲回车就搜索
		$("[name=student-name]").keypress(function (e) {
                if (e.which == 13) {
                    $("#btn-search").trigger("click");
                }
		});
		// 清空搜索框
		$("[name=student-name]").keyup(function() {
			if($(this).val().length > 0) {
				$("#empty-search").show();
				$("#empty-search").click(function(){
					$("[name=student-name]").val('');
					$(this).hide();
                    // 重置搜索结果
					searchData(table);
				})
			} else {
				$("#empty-search").hide();
			}
		}); 
		// 搜索标题
		$("#btn-search").click(function() {
			searchData(table);
		});
		// 搜索时间
		$(".btn-search-time").click(function() {
			var beginTime = $(".hour-input-begin").val();
			var endTime = $(".hour-input-end").val();
			if(beginTime != '' && endTime != '' && beginTime > endTime) {
				tips_alert("开始时间不能小于结束时间", false, function() {
				});
				$(".hour-input-begin").val('');
				return;
			}
			searchData(table);
		});
	})
	function searchData(table) {
		var studentName = $("[name=student-name]").val();
		// var type =$("#div-type .active").data("id");
		// var state =$("#div-state .active").data("id");
		// var temperature = $("#div-temperature .active").data("value");
		// var gradeId = $("#div-grade .active").data("id");
		// var classId = $("#div-normal-class .active").data("id");
		var beginTime = $(".hour-input-begin").val();
		var endTime = $(".hour-input-end").val();
		if(beginTime != "" && endTime != "" && beginTime > endTime) {
			beginTime = '';
			endTime = '';
		}
		table.setAjaxData({
			'keyword': studentName,
			// "type": type,
			// "state": state,
			// "temperature": temperature,
			// "gradeId": gradeId,
			// "classId": classId,
			"begintime": beginTime,
			"endtime": endTime
		});
	}
</script>